<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="shortcut icon" href="img/bouee-small.png">

        <link rel="stylesheet" href="css/foundation.css" />
        <link rel="stylesheet" href="css/index.css" />
        <script src="js/vendor/modernizr.js"></script>
        <title>PathWorld</title>
    </head>
    <body>
        <div class="app">
            <div id="topbar" class="row"></div>

            <div class="page" id="index">
                <div class="row">
                    <div class="large-4 medium-6 small-12 large-offset-2 large-centered medium-centered columns">
                        <img src="img/bouee.png" class="large-centered">
                        <form>
                            <a href="#" class="button postfix">Login</a>
                            <a href="#" class="button postfix">Register</a>
                        </form>
                    </div>
                </div>
            </div>

  			<div class="page" id="checkevent">
            	<div id="map"></div>
                
            </div>
            <div class="page" id="login">
                <div class="row">
                    <div class="large-4 medium-6 small-12 large-offset-2 large-centered medium-centered columns">
                    <form>
                        <fieldset>
                            <legend><span class="radius secondary label">Trouve ton chemin</span></legend>

                            <form>
                                <span class="radius secondary label"><h3>Identifiant</h3></span>
                                <input type="text" placeholder="login" required pattern="[a-zA-Z0-9]+">
                                <small id="errorLoginMissing" class="error">Login is required.</small>

                                <span class="radius secondary label">Mot de passe</span>
                                <input type="text" placeholder="password">
                                <small id="errorPasswordMissing" class="error">PassWord is required.</small>

                                <button type="submit">Submit</button>
                            </form>
                            
                        </fieldset>
                    </form>
                    </div>
                </div>
            </div>

            <div class="page" id="register">
                <div class="row">
                    <div class="large-6 medium-6 small-12 large-offset-2 large-centered medium-centered columns">
                    <form>
                        <fieldset>
                            <legend>
                            <span class="radius secondary label"><h3>Inscris-toi</h3></span>
                            </legend>
                            <form>
                                <div class="row">
                                  <div class="large-6 columns">
                                      <label>Nom</label>
                                        <input type="text" placeholder="FirstName">
                                        <small id="errorSurNameMissing" class="error">Name is required.</small>
                                  </div>
                                  <div class="large-6 columns">
                                      <label>Prénom</label>
                                        <input type="text" placeholder="LastName">
                                        <small id="errorNameMissing" class="error">PassWord is required.</small>
                                  </div>
                                </div>

                                <div class="row">
                                  <div class="large-6 columns">
                                        <label>Mail</label>
                                        <input type="text" placeholder="Mail" required pattern="[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,4}">
                                        <small id="errorLoginMissing" class="error">Login is required.</small>
                                  </div>
                                  <div class="large-6 columns">
                                      <label>Mot de passe</label>
                                        <input type="text" placeholder="Password">
                                        <small id="errorPasswordMissing" class="error">Password is required.</small>

                                        <label>Mot de passe</label>
                                        <input type="text" placeholder="Password">
                                        <small id="errorPasswordMissing" class="error">Password is required.</small>
                                  </div>
                                </div>

                                <button type="submit">Submit</button>
                            </form>
                            
                        </fieldset>
                    </form>
                </div>
            </div>

            <div class="page" id="homepage">
 
            </div>

            <div class="page" id="profile">
                
            </div>

            <div class="page" id="createevent">
                
            </div>

          
            <div class="page" id="modifyevent"></div>
            <div class="page" id="displayinvitation"></div>
        </div>
        <script src="js/vendor/jquery.js"></script>
	    <script src="js/foundation/foundation.js"></script>
        <script src="js/foundation/foundation.abide.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfWDZUG94WtUrlGzz4KBfQbY_2f3Wa6aM&sensor=false"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
            $(document).foundation();
        </script>
    </body>
</html>
